<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts3 Ajax</title>
    <script src="{{ url_for('static', filename='jquery-3.1.1.js') }}"></script>
    <script src="{{ url_for('static', filename='echarts.js') }}"></script>
</head>

<body>

<form>
        <span>输入开始日期如20220604</span>
        <input type="text" id="getfromDate"  placeholder="请输入日期" onchange="get_fromdate()" >
        <span>输入截止日期如20220605</span>
        <input type="text" id="gettoDate"  placeholder="请输入日期" onchange="get_todate()" >

</form>
    <div id="totalCount" style="height:10px;border:1px solid #ccc;padding:10px;"></div>
    <!--为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="height:1800px;border:1px solid #ccc;padding:10px;"></div>

    <script type="text/javascript">
        var fromDate = 20220504
        var toDate = 20220604
        var fromtodate = {"fromDate":fromDate,"toDate":toDate}
        function get_fromdate(){
            fromDate = $("#getfromDate").val()
            console.log(fromDate)
            fromtodate = '{"fromDate":'+fromDate+',"toDate":'+toDate+'}'

        }
        function get_todate() {
            toDate = $("#gettoDate").val()
            console.log(toDate)
            fromtodate = '{"fromDate":'+fromDate+',"toDate":'+toDate+'}'

        }

    //--- 折柱 ---
    var myChart = echarts.init(document.getElementById('main'));

        var totalCount=0,
        ScoreAvg= 0.0,
        MaleCount= 0,
        FemaleCount= 0,
        Age1860Count= 0,
        AgeLess18Count= 0,
        SideCount= 0,
        BackCount= 0,
        FrontCount= 0,
        GlassesFalseCount= 0,
        GlassesTrueCount= 0,
        HatTrueCount= 0,
        HatFalseCount= 0,
        HoldObjectsInFrontFalseCount= 0,
        HoldObjectsInFrontTrueCount= 0,
        ShoulderBagCount= 0,
        NobagCount= 0,
        HandBagCount= 0,
        BackpackCount= 0,
        LongSleeveCount= 0,
        LongSleeveUpperLogoCount= 0,
        LongSleeveUpperSpliceCount= 0,
        ShortSleeveCount= 0,
        ShortSleeveUpperLogoCount= 0,
        LongCoatCount= 0,
        LongCoatTrousersCount= 0,
        LowerPatternCount= 0,
        ShortsCount= 0,
        SkirtDressCount= 0,
        TrousersCount= 0


    //准备好统一的 callback 函数
    var update_mychart = function (data) { //data是json格式的response对象

        myChart.hideLoading(); // 隐藏加载动画

        console.log(fromtodate)
        dataLength = data.ScoreAvg.length; //取回的数据长度
        // lastID += dataLength; //哨兵，相应增加。

        // 切片是能统一的关键！！
        // insert_time = insert_time.slice(dataLength).concat(data.insert_time); // 数组，先切片、再拼接
        // cpu1 = cpu1.slice(dataLength).concat(data.cpu1.map(parseFloat)); //注意map方法
        // cpu2 = cpu2.slice(dataLength).concat(data.cpu2.map(parseFloat));
        // cpu3 = cpu3.slice(dataLength).concat(data.cpu3.map(parseFloat));
        // cpu4 = cpu4.slice(dataLength).concat(data.cpu4.map(parseFloat));

        //将获取到的json分装为[{name:"",values:},{}]格式的
        console.log(data)
        totalCount=data.totalCount
        ScoreAvg=data.ScoreAvg
        MaleCount=data.MaleCount
        FemaleCount=data.FemaleCount
        Age1860Count=data.Age1860Count
        AgeLess18Count=data.AgeLess18Count
        SideCount=data.SideCount
        BackCount=data.BackCount
        FrontCount=data.FrontCount
        GlassesFalseCount=data.GlassesFalseCount
        GlassesTrueCount=data.GlassesTrueCount
        HatTrueCount= data.HatTrueCount,
        HatFalseCount= data.HatFalseCount,
        HoldObjectsInFrontFalseCount= data.HoldObjectsInFrontFalseCount,
        HoldObjectsInFrontTrueCount= data.HoldObjectsInFrontTrueCount,
        ShoulderBagCount= data.ShoulderBagCount,
        NobagCount= data.NobagCount,
        HandBagCount= data.HandBagCount,
        BackpackCount= data.BackpackCount,
        LongSleeveCount= data.LongSleeveCount,
        LongSleeveUpperLogoCount= data.LongSleeveUpperLogoCount,
        LongSleeveUpperSpliceCount= data.LongSleeveUpperSpliceCount,
        ShortSleeveCount= data.ShortSleeveCount,
        ShortSleeveUpperLogoCount= data.ShortSleeveUpperLogoCount,
        LongCoatCount= data.LongCoatCount,
        LongCoatTrousersCount= data.LongCoatTrousersCount,
        LowerPatternCount= data.LowerPatternCount
        ShortsCount= data.ShortsCount,
        SkirtDressCount= data.SkirtDressCount,
        TrousersCount= data.TrousersCount
	    document.getElementById('totalCount').innerHTML = "日期"+fromDate+"至"+toDate+"期间人流量总数"+totalCount;//2、在div节点上显示
        console.log(ScoreAvg)
        console.log(MaleCount)


        // 填入数据
          var data= [[{
            // datas : [[{
                name: '男士', // 根据名字对应到相应的系列
                value: MaleCount
            },{
                name: '女士',
                value: FemaleCount
            }],
            [{
                name: '18~60岁之间', // 根据名字对应到相应的系列
                value: Age1860Count
            },{
                name: '18岁以下',
                value: AgeLess18Count
            }],
            [{
                name: '侧面', // 根据名字对应到相应的系列
                value: SideCount
            },{
                name: '背面',
                value: BackCount
            },{
                name: '正面',
                value: FrontCount
            }],
            [{
                name: '无眼镜', // 根据名字对应到相应的系列
                value: GlassesFalseCount
            },{
                name: '有眼镜',
                value: GlassesFalseCount
            }],
            [{
                name: '有帽子', // 根据名字对应到相应的系列
                value: HatTrueCount
            },{
                name: '无帽子',
                value: HatFalseCount
            }],
            [{
                name: '未正面持物', // 根据名字对应到相应的系列
                value: HoldObjectsInFrontFalseCount
            },{
                name: '正面持物',
                value: HoldObjectsInFrontTrueCount
            }],
            [{
                name: '单肩包', // 根据名字对应到相应的系列
                value: ShoulderBagCount
            },{
                name: '未背包',
                value: NobagCount
            },{
                name: '手提包',
                value: HandBagCount
            },{
                name: '双肩包',
                value: BackpackCount
            }],
            [{
                name: '长袖', // 根据名字对应到相应的系列
                value: LongSleeveCount
            },{
                name: '带logo长袖',
                value: LongSleeveUpperLogoCount
            },{
                name: '条纹长袖',
                value: LongSleeveUpperSpliceCount
            },{
                name: '短袖',
                value: ShortSleeveCount
            },{
                name: '带logo短袖',
                value: ShortSleeveUpperLogoCount
            }],
            [{
                name: '长外套', // 根据名字对应到相应的系列
                value: LongCoatCount
            },{
                name: '长外套长裤',
                value: LongCoatTrousersCount
            },{
                name: '花纹长外套',
                value: LowerPatternCount
            },{
                name: '短裤',
                value: ShortsCount
            },{
                name: '裙子',
                value: SkirtDressCount
            }]
            ]

    // var  data= [[{
    // // var  datas= [[{
    //         name: '男士', // 根据名字对应到相应的系列
    //         value: 0
    //     },{
    //         name: '女士',
    //         value: 0
    //     }],
    //     [{
    //         name: '18~60岁之间', // 根据名字对应到相应的系列
    //         value: 0
    //     },{
    //         name: '18岁以下',
    //         value: 0
    //     }],
    //     [{
    //         name: '侧面', // 根据名字对应到相应的系列
    //         value: 0
    //     },{
    //         name: '背面',
    //         value: 0
    //     },{
    //         name: '正面',
    //         value: 0
    //     }],
    //     [{
    //         name: '无眼镜', // 根据名字对应到相应的系列
    //         value: 0
    //     },{
    //         name: '有眼镜',
    //         value: 0
    //     }]
    //     ]


    myChart.setOption({
        title: {
        text: '当日行人属性统计',
        left: 'center',
        textStyle: {
          color: '#999',
          fontWeight: 'normal',
          fontSize: 14
        }
      },
    //   {
    //   subtext: 'alignTo: "none" (default)',
    //   left: '16.67%',
    //   top: '75%',
    //   textAlign: 'center'
    // },
    // {
    //   subtext: 'alignTo: "labelLine"',
    //   left: '50%',
    //   top: '75%',
    //   textAlign: 'center'
    // },
    // {
    //   subtext: 'alignTo: "edge"',
    //   left: '83.33%',
    //   top: '75%',
    //   textAlign: 'center'
    // }
    //   ],
      series: data.map(function (data, idx) {
      // series: datas.map(function (data, idx) {
        var top = idx * 10;
        return {
          type: 'pie',
          radius: [20, 60],
          top: top + '%',
          height: '10%',
          left: 'center',
          // right: 0,
          width: 400,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          label: {
            alignTo: 'edge',
            formatter: '{name|{b}}\n{time|{c} 人次}',
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: '#999'
              }
            }
          },
          labelLine: {
            length: 15,
            length2: 0,
            maxSurfaceAngle: 80
          },
          labelLayout: function (params) {
            const isLeft = params.labelRect.x < myChart.getWidth() / 2;
            const points = params.labelLinePoints;
            // Update the end point.
            points[2][0] = isLeft
              ? params.labelRect.x
              : params.labelRect.x + params.labelRect.width;
            return {
              labelLinePoints: points
            };
          },
          data: data
        }
        // ,{
        //   type: 'pie',
        //   radius: [20, 60],
        //   top: top + '%',
        //   height: '25%',
        //   left: '0',
        //   right: '66.6667%',
        //   width: 400,
        //   itemStyle: {
        //     borderColor: '#fff',
        //     borderWidth: 1
        //   },
        //   label: {
        //     alignTo: 'edge',
        //     formatter: '{name|{b}}\n{time|{c} 人次}',
        //     minMargin: 5,
        //     edgeDistance: 10,
        //     lineHeight: 15,
        //     rich: {
        //       time: {
        //         fontSize: 10,
        //         color: '#999'
        //       }
        //     }
        //   },
        //   labelLine: {
        //     length: 15,
        //     length2: 0,
        //     maxSurfaceAngle: 80
        //   },
        //   labelLayout: function (params) {
        //     const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        //     const points = params.labelLinePoints;
        //     // Update the end point.
        //     points[2][0] = isLeft
        //       ? params.labelRect.x
        //       : params.labelRect.x + params.labelRect.width;
        //     return {
        //       labelLinePoints: points
        //     };
        //   },
        //   data: data
        // },{
        //   type: 'pie',
        //   radius: [20, 60],
        //   top: top + '%',
        //   height: '25%',
        //   left: '33.3333%',
        //   right: '33.3333%',
        //   width: 400,
        //   itemStyle: {
        //     borderColor: '#fff',
        //     borderWidth: 1
        //   },
        //   label: {
        //     alignTo: 'edge',
        //     formatter: '{name|{b}}\n{time|{c} 人次}',
        //     minMargin: 5,
        //     edgeDistance: 10,
        //     lineHeight: 15,
        //     rich: {
        //       time: {
        //         fontSize: 10,
        //         color: '#999'
        //       }
        //     }
        //   },
        //   labelLine: {
        //     length: 15,
        //     length2: 0,
        //     maxSurfaceAngle: 80
        //   },
        //   labelLayout: function (params) {
        //     const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        //     const points = params.labelLinePoints;
        //     // Update the end point.
        //     points[2][0] = isLeft
        //       ? params.labelRect.x
        //       : params.labelRect.x + params.labelRect.width;
        //     return {
        //       labelLinePoints: points
        //     };
        //   },
        //   data: data
        // },

        ;
      })
    });


    // 六个全局变量：插入时间、cpu1、cpu2、cpu3、cpu4、 哨兵（用于POST）
    // var insert_time = ["","","","","","","","","",""],
    //     cpu1 = [0,0,0,0,0,0,0,0,0,0],
    //     cpu2 = [0,0,0,0,0,0,0,0,0,0],
    //     cpu3 = [0,0,0,0,0,0,0,0,0,0],
    //     cpu4 = [0,0,0,0,0,0,0,0,0,0],
    //
    //     lastID = 0; // 哨兵，记录上次数据表中的最后id +1（下次查询只要>=lastID）
    // var ScoreAvg= 0.0,
    //     MaleCount= 0,
    //     FemaleCount= 0,
    //     Age1860Count= 0,
    //     AgeLess18Count= 0,
    //     SideCount= 0,
    //     BackCount= 0,
    //     FrontCount= 0,
    //     GlassesFalseCount= 0,
    //     GlassesTrueCount= 0
    //
    //
    // //准备好统一的 callback 函数
    // var update_mychart = function (data) { //data是json格式的response对象
    //
    //     myChart.hideLoading(); // 隐藏加载动画
    //
    //     dataLength = data.ScoreAvg.length; //取回的数据长度
    //     // lastID += dataLength; //哨兵，相应增加。
    //
    //     // 切片是能统一的关键！！
    //     // insert_time = insert_time.slice(dataLength).concat(data.insert_time); // 数组，先切片、再拼接
    //     // cpu1 = cpu1.slice(dataLength).concat(data.cpu1.map(parseFloat)); //注意map方法
    //     // cpu2 = cpu2.slice(dataLength).concat(data.cpu2.map(parseFloat));
    //     // cpu3 = cpu3.slice(dataLength).concat(data.cpu3.map(parseFloat));
    //     // cpu4 = cpu4.slice(dataLength).concat(data.cpu4.map(parseFloat));
    //
    //     //将获取到的json分装为[{name:"",values:},{}]格式的
    //     console.log(data)
    //     ScoreAvg=data.ScoreAvg
    //     MaleCount=data.MaleCount
    //     FemaleCount=data.FemaleCount
    //     Age1860Count=data.Age1860Count
    //     AgeLess18Count=data.AgeLess18Count
    //     SideCount=data.SideCount
    //     BackCount=data.BackCount
    //     FrontCount=data.FrontCount
    //     GlassesFalseCount=data.GlassesFalseCount
    //     GlassesTrueCount=data.GlassesTrueCount
    //     console.log(ScoreAvg)
    //     console.log(MaleCount)
    //
    //
    //     // 填入数据
    //         data= [[{
    //         // datas : [[{
    //             name: '男士', // 根据名字对应到相应的系列
    //             value: MaleCount
    //         },{
    //             name: '女士',
    //             value: FemaleCount
    //         }],
    //         [{
    //             name: '18~60岁之间', // 根据名字对应到相应的系列
    //             value: Age1860Count
    //         },{
    //             name: '18岁以下',
    //             value: AgeLess18Count
    //         }],
    //         [{
    //             name: '侧面', // 根据名字对应到相应的系列
    //             value: SideCount
    //         },{
    //             name: '背面',
    //             value: BackCount
    //         },{
    //             name: '正面',
    //             value: FrontCount
    //         }],
    //         [{
    //             name: '无眼镜', // 根据名字对应到相应的系列
    //             value: GlassesFalseCount
    //         },{
    //             name: '有眼镜',
    //             value: GlassesFalseCount
    //         }]
    //         ]

        if (dataLength === 0){clearInterval(timeTicket);} //如果取回的数据长度为0,停止ajax
    }

    myChart.showLoading(); // 首次显示加载动画


    // 异步加载数据 （首次，get，显示1个数据）
    $.post('/cpu',fromtodate).done(update_mychart);
    // 异步更新数据 （以后，定时post，取回1个数据）
    var timeTicket = setInterval(function () {
        $.post('/cpu',fromtodate).done(update_mychart);
    }, 3000);

    </script>
</body>
</html>
